<template>
  <div id="ResetPassword">
    <p class="c-alert">{{isFirstStep?"第一步：请输入您需要找回登录密码的账号":"第二步：请输入新密码"}}</p>
    <van-cell-group v-if="isFirstStep">
      <van-field
        input-align="right"
        label="帐号"
        placeholder="请输入"
      />
      <van-cell @click="showPop=true" :value="chooseType" title="找回方式" is-link/>
      <van-field
        input-align="right"
        label="手机号"
        placeholder="请输入"
      />
      <van-field
        input-align="right"
        label="验证码"
        placeholder="请输入"
      />
    </van-cell-group>
    <van-cell-group v-else>
      <van-field
        input-align="right"
        label="帐号"
        placeholder="请输入"
      />
      <van-field
        input-align="right"
        label="新密码"
        placeholder="请输入新密码"
      />
      <van-field
        input-align="right"
        label="确认密码"
        placeholder="请再次输入新密码"
      />
    </van-cell-group>
    <van-popup :show="showPop" position="bottom"
               @close="showPop=false">
      <van-picker :columns="columns" @change="onChange"/>
    </van-popup>
    <footer class="c-footer">
      <button class="c-footer__btn" @click="onSubmit">{{isFirstStep?"下一步":"确定"}}</button>
    </footer>
  </div>

</template>

<script>
  export default {
    name: "ResetPassword",
    data() {
      return {
        isFirstStep: true,
        showPop: false,
        chooseType: "手机找回",
        columns: ["手机找回", "邮箱找回"]
      }
    },
    methods: {
      onChange({target: {value}}) {
        this.chooseType = value;
      },
      onSubmit() {
        if (!this.isFirstStep) return wx.navigateBack({delta: 2});
        this.isFirstStep = false;
      }
    },
    computed: {},
    onShow() {
      this.isFirstStep = true
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/common";

  #ResetPassword {
    .c-alert {
      padding: 20px 15px;
      font-weight: bold;
      color: #ed6a0c;
    }
    .c-footer {
      @include absoluteFull(fixed);
      top: auto;
      @include flex-center;
      padding: 20px 0;
      &__btn {
        background: #07c160;
        padding: 10px 0;
        font-size: 18px;
        color: white;
        width: 80%;
      }
    }
  }
</style>
